<template>
    <view class="payment">
        <view class="payment-top">
            <image src="https://daiyue.gzzhenyi.net/static/index/succeed.svg" v-if="payShow" mode="scaleToFill" />
            <image src="https://daiyue.gzzhenyi.net/static/index/failure.svg" v-else mode="scaleToFill" />
            <view class="payment-top-title" v-if="payShow">支付成功</view>
            <view class="payment-top-title" v-else>支付失败</view>
            <view class="payment-top-text">可以在个人中心“我的订单”查看</view>
            <view class="payment-bottom">
                <view class="payment-bottom-buttom-top" :class="payShow ? 'payment-top-suceed' : 'payment-top-failure'"
                    @click="orderForm">
                    查看订单</view>
                <view class="payment-bottom-buttom-bottom"
                    :class="payShow ? 'payment-bottom-suceed' : 'payment-bottom-failure'" @click="home">返回首页</view>
            </view>
        </view>
    </view>


</template>

<script>
export default {
    data() {
        return {
            payShow: false
        }
    },
    onLoad(options) {
        this.payShow = options.payShow == 'true' ? true : false || false
    },
    methods: {
        home() {
            uni.switchTab({ url: '/pages/index/index' })
        },
        orderForm() {
            uni.reLaunch({ url: '/pages/order/orderList?status=0' })
        }
    }
}
</script>

<style lang="scss">
page {
    background: #fff;
}

.payment {
    position: relative;

    .payment-top {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
        text-align: center;

        image {
            width: 150upx;
            height: 150upx;
        }

        .payment-top-title {
            margin-top: 50upx;
            color: #333333;
            font-size: 50upx;
            text-align: center;
            font-weight: bold;

        }

        .payment-top-text {
            font-size: 30upx;
            color: #333333;
            margin-top: 20upx;
            width: 500upx;
            font-weight: normal;
        }
    }

    .payment-bottom {
        margin-top: 163upx;

        .payment-bottom-buttom-top {
            width: 300upx;
            height: 80upx;
            line-height: 80upx;
            margin: 0 auto;
            border-radius: 50upx;
            color: #fff;
            text-align: center;
            font-size: 30upx;
        }

        .payment-bottom-buttom-bottom {
            margin: 20upx auto;
            width: 300upx;
            height: 80upx;
            line-height: 80upx;
            border-radius: 50upx;
            text-align: center;
            font-size: 30upx;
        }

        .payment-top-suceed {
            background-color: #359BEF;
        }

        .payment-bottom-suceed {
            border: 1px solid #359BEF;
            color: #359BEF;
        }

        .payment-bottom-failure {
            border: 1px solid #A2A2A2;
            color: #A2A2A2;
        }

        .payment-top-failure {
            background-color: #FF6200;
        }
    }

}
</style>